<% content_for :title, t("circuitverse.teachers.title") %>

<div class="row justify-content-center text-center mt-5">
  <div class="col-12">
    <h1 class="text-success"><%= t("circuitverse.teachers.main_heading") %></h1>
    <div class="mb-4 mx-auto mw-100">
      <p class="fs-5"><%= t("circuitverse.teachers.main_description") %></p>
    </div>
    <h2><%= t("circuitverse.teachers.benefits") %></h2>
  </div>
</div>
<div class="container-fluid py-5">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-md-6 text-start">
        <h4><%= t("circuitverse.teachers.create_group_heading") %></h4>
        <p><%= t("circuitverse.teachers.create_group_description") %></p>
      </div>
      <div class="col-md-6">
        <img class="img-fluid border border-2 border-secondary" src="img/groups.png" alt="Groups screenshot">
      </div>
    </div>
  </div>
</div>
<div class="container-fluid py-5">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-md-6 text-start">
        <h4><%= t("circuitverse.teachers.post_assignment_heading") %></h4>
        <p><%= t("circuitverse.teachers.post_assignment_description") %></p>
      </div>
      <div class="col-md-6">
        <img class="img-fluid border border-2 border-secondary" src="img/assignment.png" alt="Assignments screenshot">
      </div>
    </div>
  </div>
</div>
<div class="container-fluid py-5">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-md-6 text-start">
        <h4><%= t("circuitverse.teachers.grade_assignment_heading") %></h4>
        <p><%= t("circuitverse.teachers.grade_assignment_description") %></p>
      </div>
      <div class="col-md-6">
        <img class="img-fluid border border-2 border-secondary" src="img/grading.png" alt="Grading screenshot">
      </div>
    </div>
  </div>
</div>
<div class="container-fluid py-5">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-md-6 text-start">
        <h4><%= t("circuitverse.teachers.use_interactive_circuit_heading") %></h4>
        <p><%= t("circuitverse.teachers.use_interactive_circuit_description") %></p>
      </div>
      <div class="col-md-6">
        <img class="img-fluid border border-2 border-secondary" src="img/embed.png" alt="Embed screenshot">
      </div>
    </div>
  </div>
</div>
